<template>
  <div class="info-card">
    <el-card class="box-card">
      <div class="family-img">
        <el-image 
          :src="imgList[0]"  
          style="width: 600px;"
          :preview-src-list="imgList"
        />
      </div>
      <div class="family-text">
        <h2 style="white-space: pre-wrap;">{{title}}</h2>
        <p style="white-space: pre-wrap;">{{synopsis}}</p>
      </div> 

    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgList: [],
      title: "Title",
      synopsis: "synopsis",
    };
  },
  created() {
    this.$http.get('/json/HomeInfo.json').then((response) => {
      console.log(response);
      this.imgList = response.data.imgList;
      this.title = response.data.title;
      this.synopsis = response.data.synopsis;

    });
  },

 };
</script>

<style lang="less" scoped>
/deep/.el-card__body{height: 320px;}

.info-card{width: 100%; }
.family-img{float: right;}

.family-text{
  width: 550px;
  margin: 10px 10px;
  font: normal 16px Georgia, "Times New Roman", Times, serif; color:#5c5c5c;
  // text-indent: 1em;
  line-height: 1.5em;
  text-align: justify;
  h2 {text-indent: 0em; text-align: center; padding-bottom: 5px;margin-top: -10px;}
  font-family: 'source sans pro',arial, sans-serif;
}
.family-emphasize{
  padding: 10px 0px;
  text-indent: 0em;
  color:#e1472f;
  font-size:18px;
  font-family:'Bradley Hand ITC';text-align: center;
}


// .top { width: 100%; margin: 10px auto; }
// .banner { height: 60px; text-align: center; }

</style>
